<!-- 设备管理-基础设置页面 -->
<template>
  <px-tabs v-model="activeName" class="equipment-tabs">
    <px-tab-pane name="first">
      <template #label>
        <p class="pane-bottom">全部</p>
        <p class="pane-line" />
      </template>

      <questList />
    </px-tab-pane>
    <px-tab-pane name="second">
      <template #label>
        <p class="pane-bottom">执行中</p>
        <p class="pane-line" />
      </template>
    </px-tab-pane>
    <px-tab-pane name="third">
      <template #label>
        <p class="pane-bottom">已完成</p>
        <p class="pane-line" />
      </template>
    </px-tab-pane>
    <px-tab-pane name="four">
      <template #label>
        <p class="pane-bottom">已超期</p>
        <p class="pane-line" />
      </template>
    </px-tab-pane>
    <px-tab-pane name="fifth">
      <template #label>
        <p class="pane-bottom">临时关闭</p>
      </template>
    </px-tab-pane>
  </px-tabs>
</template>
<script lang="ts" setup>
defineOptions({
  name: "CommonEquipSetting"
});
import { ref } from "vue";
const activeName = ref("first");
import questList from "./questList.vue";
</script>
<style lang="scss" scoped>
.equipment-tabs {
  background: #fff;
}

:deep(.px-tabs__nav) {
  margin: 10px 0 0 10px;
}

:deep(.px-tabs__item) {
  border: none !important;
}

:deep(.is-active) {
  border: none;

  .pane-bottom {
    line-height: 30px;
    border-bottom: 2px solid #3b82f6;
  }
}

.pane-bottom {
  line-height: 30px;
}

.pane-line {
  position: absolute;
  top: 12px;
  right: 0;
  height: 15px;
  color: #dcdcdc;
  border-left: 1px solid #dcdcdc;
}

:deep(.px-tabs__content) {
  overflow: visible;
}
</style>
